<template>
  <div class="warpper-box inductionInfo">
    <a-card style="margin-top: 10px;">
      <a-form layout="inline" :form="events_form">
        <a-form-item label="残疾人姓名">
          <a-input placeholder="残疾人姓名" v-decorator="['disabledName']"></a-input>
        </a-form-item>
        <a-form-item label="企业名称">
          <a-input placeholder="企业名称" v-decorator="['enterpriseName']"></a-input>
        </a-form-item>
        <a-form-item label="操作时间">
          <a-range-picker v-model="rangeDate" @change="rangeChange" valueFormat="YYYY-MM-DD"></a-range-picker>
        </a-form-item>
        <a-form-item>
          <a-button type='primary' @click="loadTable(true)">查询</a-button>
          <a-button type='primary' @click="reset">重置</a-button>
          <a-button type="primary" @click="$refs.createInfo.add(true)">新增</a-button>
          <a-button type="warning" @click="$refs.createInfo.add(true,true)">批量上传</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card style="margin-top: 10px;">
      <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
        @change="handleTableChange" rowKey="id">
        <span slot="pdfUrls" slot-scope="text, record">
          <template>
            <a v-if="record.confirmationStatus == 1" :href="record.replaceUrls" target="_blank" style="line-height: 1.5;">{{ strSlice(record.replaceUrls) }}</a>
            <a v-else :href="record.pdfUrls" target="_blank" style="line-height: 1.5;">{{ strSlice(record.pdfUrls) }}</a>
          </template>
        </span>
        <!-- 操作栏-->
        <span slot="action" slot-scope="text, record">
          <!-- 编辑模块 | 字段 -->
          <a @click="$refs.createInfo.add(record)">编辑</a>
          <span>
            <a-divider type="vertical" />
            <a-popconfirm title="确认删除?" ok-text="确认" cancel-text="取消" @confirm="remove(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </span>
      </a-table>
    </a-card>
    <add-info ref="createInfo" @on-ok="addLoad"></add-info>
  </div>
</template>

<script>

import store from '@/store'
import AddInfo from "./workConfirm_add.vue"
import {
  COLUMNS_WORKCONFIRM
} from "./form"
import {
  getPageDisabledJobConfirmation,
  deleteJobConfirmation
} from "@/api/human/disabled"
import { mapGetters,mapActions } from 'vuex'
import { update } from 'C:/Users/嘉能大数据/AppData/Local/Microsoft/TypeScript/5.7/node_modules/immutable/dist/immutable'
export default {
  name: 'inductionList',
  components: {
    AddInfo
  },
  data() {
    return {
      table: {
        columns: COLUMNS_WORKCONFIRM,
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },
      
      rangeDate: [], // 日期范围
      disabledActionStartTime: "",
      disabledActionEndTime: "",
    }
  },
  filters: {
    filterMore(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  mounted() {
    this.loadTable(true);
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    
  },
  methods: {
    // 日期选择
    rangeChange(e) {
      this.disabledActionStartTime = e[0];
      this.disabledActionEndTime = e[1];
    },
    // 获取企业员工列表
    async loadTable(flag) {
      let params = this.events_form.getFieldsValue();
      params.disabledActionStartTime = this.disabledActionStartTime;
      params.disabledActionEndTime = this.disabledActionEndTime;
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await getPageDisabledJobConfirmation(params);
      if (code == '1') {
        this.table.loadData = data.content || [];
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    
    // 删除列表数据
    async remove(item) {
      let params = {
        id: item.id
      }
      const {
        code
      } = await deleteJobConfirmation(params);
      if (code == '1') {
        this.$message.success('删除成功');
        this.loadTable(true);
      }
    },
    // 名称截取
    strSlice(str) {
      const spliceLength = str.lastIndexOf("/");
      return str.slice(spliceLength + 1);
    },
    addLoad() {
      this.loadTable(true);
    },
    reset() {
      this.events_form.resetFields();
      this.rangeDate = [];
      this.disabledActionStartTime = "";
      this.disabledActionEndTime = "";
      this.loadTable(true);
    },
  }
}
</script>
